<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>资料收集</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">

		<!--标准mui.css-->
		<link rel="stylesheet" href="./css/mui.min.css">
		<!--App自定义的css-->
		<link rel="stylesheet" type="text/css" href="./css/common.css" />
		<style>
			.sub-title {
				color: #666;
				line-height: 50px;
				text-align: center;
				font-size: 16px;
			}
			#collect-page .form {
				width: 100%;
				border-radius: 0;
			}
			#collect-page .mui-input-row label {
				width: 80px;
				height: 40px;
				font-size: 14px;
				line-height: 18px;
				padding-left: 0;
			}
			#collect-page .mui-input-row .mui-input-password, #collect-page .mui-input-row .mui-input-clear {
				width: 180px;
			}
			#collect-page .mui-input-row .mui-icon-eye {
				color: #666;
			}
			#collect-page .mui-input-row .mui-icon-eye.mui-active {
				color: #4cc8cf;
			}
			.form .sure-btn {
				width: 100%;
				height: 40px;
				background-color: #4cc8cf;
				border-color: #4cc8cf;
				font-size: 15px;
			}
			.form .sure-btn:active {
				background-color: #27e2ed;
				border-color: #27e2ed;
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<h1 class="mui-title">资料收集</h1>
		</header>
		<div class="mui-content" id="collect-page">
			<p class="sub-title">支付宝认证</p>
			<form class="form">
				<div class="input-row">
					<div class="input-wrap mui-input-row">
						<span class="mui-icon iconfont icon-shouji-tianchong"></span>
						<label>手机号</label>
						<input type="text" class="mui-input-clear" id="phone" placeholder="请输入手机号">
					</div>
				</div>
				<div class="input-row">
					<div class="input-wrap mui-input-row">
						<span class="mui-icon iconfont icon-password"></span>
						<label>服务密码</label>
						<input type="password" class="mui-input-password" id="psw" placeholder="请输入服务密码">
					</div>
				</div>
				
				<button type="button" class="mui-btn mui-btn-primary sure-btn" onclick="sureHandler()">认证</button>
			</form>
		</div>
		<script src="./js/mui.min.js"></script>
		<script src="./js/common.js"></script>
		<script>
			console.log('collect alipay page start');
			// 表单验证
			function formValidate(form) {
				if (!validate(form.phone, 'phone')){
					mui.toast('请输入格式正确的手机号', {
						duration: 3000
					});
					return;
				}
				if (!validate(form.password, 'password')){
					mui.toast('请输入格式正确的密码', {
						duration: 3000
					});
					return;
				}
				return true;
			}

			function sureHandler() {
				var phone = document.querySelector('#phone').value;
				var psw = document.querySelector('#psw').value;
				var form = {
					phone: phone, //账号
					password: psw // 密码
				};
				if (!formValidate(form)) {
					return;
				}
				// 发送提交请求
				mui.ajax('http://121.41.85.178:7300/mock/5acc68cb77a58d43f11ae3e4/muiapi/collect/common',{
					data: form,
					dataType:'json',//服务器返回json格式数据
					type:'post',//HTTP请求类型
					timeout:10000,//超时时间设置为10秒；
					headers:{'Content-Type':'application/json'},	              
					success:function(data){
						console.log(data);
					},
					error:function(xhr,type,errorThrown){
						//异常处理；
						console.log(type);
					}
				});
			}
		</script>
	</body>

</html>